import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import storage from '@/utils/storage.ts'

// 进度条
import NProgress from 'nprogress' // 导入 nprogress模块
import 'nprogress/nprogress.css' // 导入样式，否则看不到效果
NProgress.configure({ showSpinner: false }) // 显示右上角螺旋加载提示

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    meta: {
      title: '登录'
    }
  },
  // 普通用户
  {
    path: '/layout',
    component: () => import('@/views/layout.vue'),
    redirect: '/home',
    children: [
      {
        path: '/home',
        component: () => import('@/views/HomePage/index.vue'),
        meta: {
          title: '首页'
        }
      },
      {
        path: '/community',
        component: () => import('@/views/Community/index.vue'),
        meta: {
          title: '社区'
        }
      },
      {
        path: '/communityDetail',
        component: () => import('@/views/Community/communityDetail.vue')
      },
      {
        path: '/game',
        component: () => import('@/views/Game/index.vue'),
        children: [
          {
            path: '/game/study/:levelKey?',
            component: () => import('@/views/Game/studyPage.vue'),
            props: true
          },
          {
            path: '/game/levels',
            component: () => import('@/views/Game/levelsPage.vue')
          },
          {
            path: '/game/ground',
            component: () => import('@/views/Game/groundPage.vue')
          }
        ]
      },
      {
        path: '/personalCenter',
        component: () => import('@/views/PersonalCenter/index.vue'),
        redirect: '/personalCenter/personalData',
        meta: {
          title: '个人中心'
        },
        children: [
          {
            path: '/personalCenter/personalData',
            component: () => import('@/views/PersonalCenter/personData.vue'),
            meta: {
              title: '个人资料'
            }
          },
          {
            path: '/personalCenter/myFans',
            component: () => import('@/views/PersonalCenter/myFans.vue'),
            meta: {
              title: '我的粉丝'
            }
          },
          {
            path: '/personalCenter/myFollowers',
            component: () => import('@/views/PersonalCenter/myFollowers.vue'),
            meta: {
              title: '我的关注'
            }
          },
          {
            path: '/personalCenter/learningRecord',
            component: () =>
              import('@/views/PersonalCenter/learningRecord.vue'),
            meta: {
              title: '学习记录'
            }
          },
          {
            path: '/personalCenter/accountSettings',
            component: () =>
              import('@/views/PersonalCenter/accountSettings.vue'),
            meta: {
              title: '账号设置'
            }
          }
        ]
      },
      {
        path: '/creation',
        component: () => import('@/views/Creation/index.vue')
      },
      {
        path: '/contentManage',
        component: () => import('@/views/ContentManage/index.vue')
      }
    ]
  },
  // 管理员
  {
    path: '/manager',
    component: () => import('@/views/Manager/index.vue'),
    redirect: '/manager/home',
    children: [
      {
        path: '/manager/home',
        component: () => import('@/views/Manager/home.vue'),
        meta: {
          title: '首页'
        }
      },
      {
        path: '/manager/users',
        component: () => import('@/views/Manager/users.vue'),
        meta: {
          title: '用户管理'
        }
      },
      {
        path: '/manager/tags',
        component: () => import('@/views/Manager/tags.vue'),
        meta: {
          title: '标签管理'
        }
      },
      {
        path: '/manager/posts',
        component: () => import('@/views/Manager/posts.vue'),
        meta: {
          title: '帖子管理'
        }
      },
      {
        path: '/manager/levels',
        component: () => import('@/views/Manager/levels.vue'),
        meta: {
          title: '关卡管理'
        }
      }
    ]
  }
]

// 路由
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 路由拦截
router.beforeEach((to, _, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  // next()：放行     next('/login')：强制跳转
  // 如果用户访问的是登录页，直接放行
  NProgress.start() //开启进度条
  if (to.path === '/manager/home') {
    storage.setItem('activePath', 'manager/home')
  }
  document.title = (to.meta.title as string) || 'sql知识学习交流平台'
  next()
})

router.afterEach(() => {
  NProgress.done() //完成进度条
})

export default router
